<template>
	<view>
		
		<view class="wrap">
			<view class="item-wrap">
				<view class="img">
					<image :src="img" mode="scaleToFill"></image>
				</view>
				<view class="txt">
					<view class="title u-line-1">{{title}}</view>
					<view class="content u-line-1">{{content}}</view>
				</view>
			</view>
			<view class="extra">
				<view v-for="(item,index) in extra" :key="index">
					<image :src="item.img" mode="scaleToFill"></image>
					<text>{{item.txt}}</text>
				</view>
				<view>
					<image src="https://pic.0598777.com/time.png" mode="scaleToFill"></image>
					<text>{{time}}</text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			img: {
				type: String,
				default: 'https://pic.0598777.com/demoimages.png'
			},
			title: {
				type: String,
				default: '标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题'
			},
			content: {
				type: String,
				default: '内容内容内容内容内容内容内容内容内容内容内容内容'
			},
			time:{
				type: String,
				default: '2小时前'
			},
			extra: {
				type: Array,
				default () {
					return [
						{ img: 'https://pic.0598777.com/video2.png', txt: '有视频' },
						{ img: 'https://pic.0598777.com/cmap.png', txt: '有地图' }
					]
				}
			},

		},
	}
</script>

<style lang="scss" scoped>
	$tip: #909399;
	.wrap {
		padding: 8rpx;
		.item-wrap {
			position: relative;
			display: flex;
			.img {
				image {
					width: 96rpx;
					height: 96rpx;
				}
			}
			.txt{
				padding-left: 20rpx;
				width: 560rpx;
				.title{
					font-size: 34rpx;
				}
				.content{
					color: $tip;
					font-size: 28rpx;
				}
			}
		}
		.extra {
			// margin-top: -10rpx;
			display: flex;
			justify-content: flex-end;
			color: $tip;
			font-size: 20rpx;
			view{
				padding-right: 12rpx;
				display: flex;
				align-items: center;
			}
			image {
				padding-right: 6rpx;
				vertical-align: middle;
				width: 28rpx;
				height: 28rpx;
			}
		}
	}
</style>
